<template>
   <div>
      <div class="banner" @click="handleBannerClick">
         <img  alternate=""  class="banner-img" src="https://imgs.qunarzz.com/sight/p0/2103/e5/e58e5654921199c3a3.water.jpg_710x360_59180541.jpg" >
         <div class="banner-info">
            <div class="banner-title">磊在在在在在在在在在在在在在在在</div>
            <div class="banner-number">
               <span class="iconfont banner-iconfont">&#xe8ba;</span>
               39
            </div>
         </div>
      </div>
      <CommonGallery
        :imgs="imgs"
        v-show="showGallery"
        @close="handleGalleryClose"
      ></CommonGallery>
   </div>
</template>

<script>
import CommonGallery from 'common/gallery/Gallery'
export default ({
  name: 'DetailBanner',
  data () {
    return {
      showGallery: false,
      imgs: [
        'https://imgs.qunarzz.com/sight/p0/1412/e5/56b29ff5bfda4caeb895b87ae434c7b9.water.jpg_1190x550_2ced4495.jpg',
        'https://imgs.qunarzz.com/sight/p0/1805/45/45626968219aab68a3.img.jpg_1190x550_130b29bd.jpg'
      ]
    }
  },
  methods: {
    handleBannerClick () {
      this.showGallery = true
    },
    handleGalleryClose () {
      this.showGallery = false
    }
  },
  components: {
    CommonGallery
  }
})
</script>

<style lang="stylus" scoped>
   .banner
      position relative
      overflow: hidden
      height: 0
      padding-bottom: 50%
      .banner-img
         width: 100%
      .banner-info
         display: flex
         position: absolute
         left: 0
         right: 0
         bottom: 0
         line-height: .6rem
         color: #fff
         background-image: linear-graddient(top,rgba(0,0,0,0),rgba(0,0,0,0.8))
         .banner-title
            flex: 1
            font-size: .32rem
            padding: 0 .2rem
         .banner-number
            height: .32rem
            line-height: .32rem
            padding: 0 .4rem
            padding-top: .14rem
            border-radius: .2rem
            background: rgba(0,0,0,0.4)
            font-size: .24rem
            .banner-iconfont
              font-size: .24rem
</style>
